<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>聊天界面</title>
    <link rel="stylesheet" type="text/css" href="/css/chat.css"/>

    <script src="/js/js/jquery.min.js"></script>
    <script src="/js/flexible.js"></script>
    <script src="/js/common.js"></script>
</head>
<style>

    .aui-navBar-item:last-child {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .aui-navBar-item {
        height: 44px;
        min-width: 35%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 35%;
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
        padding: 0 0.9rem;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 0.7rem;
        white-space: nowrap;
        overflow: hidden;
        color: #808080;
        position: relative;
    }

    .aui-navBar-item:first-child {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1;
        margin-right: -25%;
        font-size: 0.9rem;
        font-weight: bold;
    }

    .icon {
        width: 20px;
        height: 20px;
        display: block;
        border: none;
        float: left;
        background-size: 20px;
        background-repeat: no-repeat;
    }

    .icon-return {
        background-image: url('');

    }


</style>
<script>
    $(function () {
        //获取当前登录用户的(session)信息
        var user = JSON.parse(sessionStorage.getItem("user"));
        //当前用户的ID
        var userID = user.id;
        //当前用户的头像
        var headImgUrl = user.headImgUrl;
        var acceptId = getParams().acceptId;
        var acceptName = decodeURI(getParams().acceptName);
        var acceptHeadImgUrl = getParams().acceptHeadImgUrl;
        //聊天人的姓名
        $('.tit').html(acceptName);
        //获得长度 取出最后一条信息的 时间 等等来判断  打开窗口 聊天时的短信 时间对比
        var lastTime=0 ;
        //页面加载完查询所有的 聊天记录
        $.get('/letter', {sendId: userID, acceptId: acceptId}, function (data) {
            //拿到两个人的所有聊天记录
            //渲染到页面
            //遍历记录看是 当前用户接受的信息 还是当前用户发送的信息
            //判断时间五分钟之内
            //当前时间系统时间
            var time;
            console.log(new Date().getTime());
            var currentTime = new Date().getTime();
            //计算间隔时间
            var intervalTime=0;
            //时间间隔的 重置器
            var flag = true;
            $.each(data, function (index, value) {
                var temp = '';
                var timeDiv = '';
                var userTime = value.createtime;
                if((data.length-1)==(index)){
                    lastTime = userTime;
                }
                //如果在5分钟以上 就设置时间  再重置 间隔时间
                if (((userTime - intervalTime) >= (60 * 1000 * 5))) {
                    //当日之内
                    timeDiv = '<div class="time">' + value.formatTime + '</div>';
                    intervalTime = userTime;
                }
                //如果是当前用户发送的就渲染到对应的dic
                if (value.sendId == userID) {
                    temp = "<div class='show'>" + timeDiv + "<div class='msg'><img src=" + headImgUrl + " />" +
                        "<p><i class='msg_input'></i>" + value.content + "</p></div></div>";
                    $('.message').append(temp)
                } else {
                    temp = "<div class='send'>" + timeDiv + "<div class='msg'><img src=" + acceptHeadImgUrl + " />" +
                        "<p><i class='msg_input'></i>" + value.content + "</p></div></div>";
                    $('.message').append(temp)
                }
            })
            //绑定对话内容里的头像 点击事件
            $('.show img').click(function () {
                window.location.href = '/userProfiles.html?id=' + userID;
            })
            $('.send img').click(function () {
                window.location.href = '/userProfiles.html?id=' + acceptId;
            })
        })

        //定时器跟新数据 拿到所有未读
        function randomTime() {
            return parseInt(Math.random() * 10)
        }

        //获取当前登录用户的(session)信息
        //随机刷新的时间
        function test() {
            setInterval(function () {
                $.get('/letter/' + userID + '/' + acceptId, function (data) {
                    $.each(data, function (index, value) {
                        var timeDiv ='';
                        var currentTime = value.createtime;
                        if((currentTime-lastTime) >= (60 * 1000 * 5)){
                            timeDiv = '<div class="time">' + value.formatTime + '</div>';
                            lastTime = currentTime;
                        }
                        var temp;
                        temp = "<div class='send'>" + timeDiv + "<div class='msg'><img src=" + acceptHeadImgUrl + " />" +
                            "<p><i class='msg_input'></i>" + value.content + "</p></div></div>";
                        upView(temp);
                    })
                    $('.send img').click(function () {
                        window.location.href = '/userProfiles.html?id=' + acceptId;
                    })
                })
            }, randomTime() * 500)
        }

        test()

        //更新视图
        function upView(html) {
            $('.message').append(html);
                $('body').animate({scrollTop: $('.message').outerHeight() - window.innerHeight}, 200)

        }

        //改变 内容 改变颜色
        $('.footer').on('keyup', 'input', function () {
            if ($(this).val().length > 0) {
                $(this).next().css('background', '#114F8E').prop('disabled', true);

            } else {
                $(this).next().css('background', '#ddd').prop('disabled', false);
            }
        })
        //点击发送 触发
        $('.footer p').click(function () {
            var content = $(this).prev().val();
            //发送ajax  讲新发的数据插入 数据库
            $.post('/letter', {sendId: userID, acceptId: acceptId, content: content},function (data) {
                var timeDiv ='';
                var currentTime = data.createtime;
                if(( currentTime-lastTime ) >= (60 * 1000 * 5)){
                    timeDiv = '<div class="time">' + data.formatTime + '</div>';
                    lastTime = currentTime;
                }
                temp = "<div class='show'>" + timeDiv + "<div class='msg'><img src=" + headImgUrl + " />" +
                    "<p><i class='msg_input'></i>" + content + "</p></div></div>";
                upView(temp);
                //绑定对话内容里的头像 点击事件
                $('.show img').click(function () {
                    window.location.href = '/userProfiles.html?id=' + userID;
                })
            });
            //清空发送的内容
            $(this).prev().val('');
            $(this).css('background', '#ddd').prop('disabled', false);
        })
        //绑定事件聊天人个人资料
        $('.right').click(function () {
            window.location.href = '/userProfiles.html?id=' + acceptId;
        })

    })
</script>
<body>
<header class="header">
    <a class="back" href="javascript:history.go(-1);" class="aui-navBar-item">
        <i class="icon icon-return"></i>
    </a>
    <h5 class="tit"></h5>
    <div class="right">个人资料</div>
</header>
<div class="message">

</div>
<div class="footer">
    <img src="/upload/hua.png" alt=""/>
    <img src="/upload/xiaolian.png" alt=""/>
    <input type="text"/>
    <p>发送</p>
</div>
<script src="/js/chat.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>